import { useState } from 'react'
export default function App (props) {
    const { addTodo } = props;
    const [newTodo, setNewTodo] = useState('');
    
     // 获取输入框值
    const changeNewTodo = (e) => {
        setNewTodo(e.target.value);
    }
    const handleAdd = () => {
        addTodo(newTodo)
        setNewTodo('')
    }
    return (
        <header>
            <h3>我的待办事项</h3>
            <div className='top'>
                <input className='new-todo' autoFocus autoComplete='off' placeholder='请输入待办项' value={newTodo} onChange = { changeNewTodo } />
                <button  className='top-btn' onClick={ handleAdd } >添加待办</button>
            </div>
      </header>
    )
}